<!--
 * @Descripttion: 网站入口-要素加工平台
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2025-06-06
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-06-12
-->
<script lang="ts" setup>
  import { ref } from 'vue'

  import { CommonImgEnum, DataProcessImgEnum } from '/@/enums/imageEnum'

  enum CardEnum {
    /** 安全可信数据处理 */
    SECURITY = 'security',
    /** 医疗智能体开发 */
    INTELLIGENCE = 'intelligence',
    /** 医疗文本后结构化处理 */
    STRUCTURAL = 'structural',
    /** 可视化机器学习建模 */
    MODEL = 'model',
    /** AI模型一键部署并发布API服务 */
    API = 'api',
  }

  /** 卡片 */
  const card = ref('')

  /**
   * 选中卡片
   * @param cardType 卡片类型
   */
  const checkCard = (cardType: CardEnum) => (card.value = cardType)
</script>

<template>
  <div class="data-govern">
    <img class="bg" :src="DataProcessImgEnum.bg" />
    <img class="studio" :src="DataProcessImgEnum.studio" />
    <div class="info">
      <div class="info-title">要素加工平台</div>
      <div class="info-desc">基于机器学习、大模型、智能体、多方安全计算、联邦学习等技术，在保证数据安全的前提下，对医疗大数据进行加工，构建医疗智能体、科研数据分析、疾病风险预测模型等医疗AI数据产品。</div>
      <div class="info-try">
        <span class="info-try-text">前往试用</span>
        <img class="info-try-arrow" :src="CommonImgEnum.searchArrow" />
      </div>
    </div>
    <div class="card">
      <div class="card-item security" :class="{ active: card === CardEnum.SECURITY }" @click="checkCard(CardEnum.SECURITY)">
        <div class="card-item-title">安全可信数据处理</div>
        <div class="card-item-content">
          <div class="text">不可篡改与溯源：利用区块链分布式账本，数据处理全程上链存证，确保操作记录可追溯、不可篡改，构建可信数据处理闭环。</div>
          <div class="text">数据可用不可见：通过隐私计算技术，在保护原始数据隐私前提下完成计算，实现 “数据不动价值动” 的安全处理。</div>
        </div>
      </div>
      <div class="card-item intelligence" :class="{ active: card === CardEnum.INTELLIGENCE }" @click="checkCard(CardEnum.INTELLIGENCE)">
        <div class="card-item-title">医疗智能体开发</div>
        <div class="card-item-content">
          <div class="text">基于提示词工程、RAG、工作流编排等方式，构建医疗场景应用智能体。 </div>
          <div class="text">完成后结构化处理、智能数据分析、病历文书生成，医生数字分身等智能体开发。</div>
        </div>
      </div>
      <div class="card-item structural" :class="{ active: card === CardEnum.STRUCTURAL }" @click="checkCard(CardEnum.STRUCTURAL)">
        <div class="card-item-title">医疗文本后结构化处理</div>
        <div class="card-item-content">
          <div class="text">医疗NLP能力：医学命名实体识别、医学关系抽取、临床发现事件抽取、临床术语标准化、特定实体抽取。</div>
          <div class="text">后结构化能力：电子病历一诉五史的后结构化，疾病、症状/体征等医学术语标准化。</div>
        </div>
      </div>
      <div class="card-item model" :class="{ active: card === CardEnum.MODEL }" @click="checkCard(CardEnum.MODEL)">
        <div class="card-item-title">可视化机器学习建模</div>
        <div class="card-item-content">
          <div class="text">基于工作流画布，通过拖拽组件，完成机器学习全流程建模。</div>
          <div class="text">内嵌丰富组件，涵盖数据预处理、统计分析、特征工程、机器/深度学习、大模型微调、模型预测以及评估。</div>
        </div>
      </div>
      <div class="card-item api" :class="{ active: card === CardEnum.API }" @click="checkCard(CardEnum.API)">
        <div class="card-item-title">AI模型一键部署并发布API服务</div>
        <div class="card-item-content">
          <div class="text">提效降本：无需复杂开发流程，一键部署实现 AI 模型快速上线，节省人力与时间成本，适配业务快速迭代需求。</div>
          <div class="text">标准化服务输出：自动生成 API 接口，统一数据交互格式，便于多系统集成调用，提升模型服务的灵活性与复用性。</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .data-govern {
    position: relative;
    margin-top: -60px;

    .bg {
      width: 100%;
    }

    .studio {
      position: absolute;
      z-index: 1;
      top: 114px;
      right: 80px;
      width: 864px;
    }

    .info {
      position: absolute;
      z-index: 2;
      top: 220px;
      left: 80px;

      .info-title {
        display: inline-block;
        height: 60px;
        line-height: 60px;
        font-size: 60px;
        font-weight: 700;
        color: transparent;
        background-image: linear-gradient(270deg, #3bcafc 0%, #2369f3 100%);
        background-clip: text;
      }

      .info-desc {
        width: 720px;
        margin-top: 32px;
        text-align: justified;
        line-height: 26px;
        font-size: 18px;
        color: #000;
      }

      .info-try {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 154px;
        height: 55px;
        margin-top: 32px;
        border-radius: 30px;
        background: linear-gradient(270deg, #39bffc 0%, #246af3 94.05%);
        cursor: pointer;

        .info-try-text {
          width: 72px;
          font-size: 18px;
          font-weight: 500;
          color: #fff;
        }

        .info-try-arrow {
          width: 22px;
          height: 22px;
          margin-left: 8px;
        }
      }
    }

    .card {
      position: absolute;
      z-index: 2;
      bottom: 40px;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;

      .card-item {
        width: 352px;
        height: 252px;
        padding: 20px;
        border: 1px solid #fff;
        border-radius: 8px;
        backdrop-filter: blur(10px);
        background: rgb(255 255 255 / 80%);
        cursor: pointer;

        .card-item-title {
          height: 28px;
          padding-left: 36px;
          line-height: 28px;
          font-size: 20px;
          font-weight: 600;
          color: #1d2129;
        }

        .card-item-content {
          margin-top: 14px;

          .text {
            margin-top: 16px;
            line-height: 22px;
            font-size: 14px;
            color: #4e5969;

            &:first-child {
              margin-top: 0;
            }
          }
        }

        &.security {
          .card-item-title {
            background: url('/@/assets/images/views/main/data-process/card-security.png') no-repeat left 2px;
            background-size: 28px 28px;
          }
        }

        &.intelligence {
          .card-item-title {
            background: url('/@/assets/images/views/main/data-process/card-intelligence.png') no-repeat left 2px;
            background-size: 28px 28px;
          }
        }

        &.structural {
          .card-item-title {
            background: url('/@/assets/images/views/main/data-process/card-structural.png') no-repeat left 2px;
            background-size: 28px 28px;
          }
        }

        &.model {
          .card-item-title {
            background: url('/@/assets/images/views/main/data-process/card-model.png') no-repeat left 2px;
            background-size: 28px 28px;
          }
        }

        &.api {
          .card-item-title {
            background: url('/@/assets/images/views/main/data-process/card-api.png') no-repeat left 2px;
            background-size: 28px 28px;
          }
        }

        &.active {
          border: 1px solid #165dff;
          box-shadow: 0 4px 8px rgb(18 69 185 / 15%);

          .card-item-content {
            .text {
              color: #1d2129;
            }
          }
        }
      }
    }
  }
</style>
